<template>
  <div class="main">
    <div class="main-title">
      <div class="main-title__router" @click="onclickRouterUrl('soleMap')">
        首页
      </div>
      <i class="main-title__icon"></i>
      <p class="main-title__position">{{ title }}</p>
    </div>

    <div class="main-content">
      <div class="left-wrapper">
        <ContentFrame :height="30" title="基础信息">
          <div class="content-boundary">
            <div class="row">
              <div class="row1">
                <p class="row1__code">监测单位</p>
                <b class="row1__value">{{ baseData.testUnit }}</b>
              </div>
              <div class="row1">
                <p class="row1__code">监测人员</p>
                <b class="row1__value">{{ baseData.testPerson }}</b>
              </div>
            </div>
            <div class="row">
              <p class="row__code">监测时间</p>
              <b class="row__value">{{ baseData.testTime }}</b>
            </div>
            <div class="row">
              <p class="row__code">监测内容</p>
              <b class="row__value">{{ baseData.testContent }}</b>
            </div>
            <div class="row overview-row">
              <p class="row__code">项目概述</p>
              <div class="row-scroll">
                <b class="row-scroll__value">{{ baseData.testDescribe }}</b>
              </div>
            </div>
          </div>
        </ContentFrame>
        <ContentFrame :height="30" title="设备状况">
          <ul class="device">
            <li class="device-type">
              <img
                src="/static/img/slope/item01.webp"
                class="device-type__icon"
              />
              <p class="device-type__name">设备总数</p>
            </li>
            <li class="device-type">
              <img
                src="/static/img/slope/item02.webp"
                class="device-type__icon"
              />
              <p class="device-type__name">总在线数量</p>
            </li>
            <li class="device-type">
              <img
                src="/static/img/slope/item03.webp"
                class="device-type__icon"
              />
              <p class="device-type__name">总离线数量</p>
            </li>
            <li class="device-type">
              <img
                src="/static/img/slope/item04.webp"
                class="device-type__icon"
              />
              <p class="device-type__name">预警数量</p>
            </li>
          </ul>

          <i class="separation"></i>

          <ul class="device-value">
            <li>1500</li>
            <li>1500</li>
            <li>5000</li>
            <li>8</li>
          </ul>

          <div class="pieContent">
            <div class="pieContent-pie">
              <div class="pieContent-pie__chart">
                <img :src="smartRing.dataImg" />
              </div>

              <p class="pieContent-pie__name">智能环</p>

              <div class="pieContent-pie__data">
                <span class="pieContent-pie__data__sum">
                  {{ smartRing.dataCost[0].value }}
                </span>/
                <span class="pieContent-pie__data__normal">
                  {{ smartRing.dataCost[1].value }}
                </span>/
                <span class="pieContent-pie__data__abnormal">
                  {{ smartRing.dataCost[2].value }}
                </span>/
                <span class="pieContent-pie__data__alarm">
                  {{ solarPanels.dataCost[3].value }}
                </span>
              </div>

              <div class="pieContent-pie__type">
                <span class="pieContent-pie__type__sum">总数</span>/
                <span class="pieContent-pie__type__normal">在线</span>/
                <span class="pieContent-pie__type__abnormal">离线</span>/
                <span class="pieContent-pie__type__alarm">预警</span>
              </div>
            </div>

            <div class="pieContent-pie">
              <div class="pieContent-pie__chart">
                <img :src="camera.dataImg" />
              </div>
              <p class="pieContent-pie__name">摄像头</p>

              <div class="pieContent-pie__data">
                <span class="pieContent-pie__data__sum">
                  {{ camera.dataCost[0].value }} </span
                >/
                <span class="pieContent-pie__data__normal">
                  {{ camera.dataCost[1].value }} </span
                >/
                <span class="pieContent-pie__data__abnormal">
                  {{ camera.dataCost[2].value }} </span
                >/
                <span class="pieContent-pie__data__alarm">
                  {{ solarPanels.dataCost[3].value }}
                </span>
              </div>

              <div class="pieContent-pie__type">
                <span class="pieContent-pie__type__sum">总数</span>/
                <span class="pieContent-pie__type__normal">在线</span>/
                <span class="pieContent-pie__type__abnormal">离线</span>/
                <span class="pieContent-pie__type__alarm">预警</span>
              </div>
            </div>

            <div class="pieContent-pie">
              <div class="pieContent-pie__chart">
                <img :src="solarPanels.dataImg" />
              </div>
              <p class="pieContent-pie__name">太阳能板</p>
              <div class="pieContent-pie__data">
                <span class="pieContent-pie__data__sum">
                  {{ solarPanels.dataCost[0].value }} </span
                >/
                <span class="pieContent-pie__data__normal">
                  {{ solarPanels.dataCost[1].value }} </span
                >/
                <span class="pieContent-pie__data__abnormal">
                  {{ solarPanels.dataCost[2].value }} </span
                >/
                <span class="pieContent-pie__data__alarm">
                  {{ solarPanels.dataCost[3].value }}
                </span>
              </div>
              <div class="pieContent-pie__type">
                <span class="pieContent-pie__type__sum">总数</span>/
                <span class="pieContent-pie__type__normal">在线</span>/
                <span class="pieContent-pie__type__abnormal">离线</span>/
                <span class="pieContent-pie__type__alarm">预警</span>
              </div>
            </div>
          </div>
        </ContentFrame>
        <ContentFrame :height="30" title="告警处理">
          <AlarmHandling></AlarmHandling>
        </ContentFrame>
      </div>

      <div class="middle-wrapper">
        <div class="middle-wrapper-weather">
          <ul class="middle-wrapper-weather-list">
            <li
              class="middle-wrapper-weather-list__day"
              v-for="i in weather.data"
              :key="i.date"
            >
              <p>{{ i.day }}</p>
              <b>{{ i.tem1 }}°-{{ i.tem2 }}°</b>
              <span>{{ i.wea }}</span>
            </li>
          </ul>
        </div>

        <!-- <div class="data-from">
          <DataPopUp></DataPopUp>
        </div> -->
      </div>

      <div class="right-wrapper">
        <ContentFrame :height="30" title="边坡实时监测">
          <template #more>
            <div class="right-wrapper__select">
              <el-select
                v-model="monitorSelectValue"
                placeholder="请选择设备"
                @change="monitorSelectChangeEvent"
              >
                <el-option
                  v-for="item in monitorLits"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </template>
          <div class="right-wrapper__content">
            <!-- <el-image
              class="right-wrapper__content__video"
              :src="monitorData.video"
            /> -->
            <div
              v-show="videoShow"
              id="video"
              class="right-wrapper__content__video"
            >
              <div id="video1"></div>
            </div>
          </div>
        </ContentFrame>

        <ContentFrame :height="30" title="边坡安全趋势">
          <LineCharts />
        </ContentFrame>

        <ContentFrame :height="30" title="边坡材料展示">
          <!-- <div class="right-wrapper__container">
            <el-image
              class="right-wrapper__container__img"
              :src="pointImgs[0]"
              fit="cover"
              :preview-src-list="pointImgs"
            />

            <i class="right-wrapper__container__icon el-icon-search"></i>
          </div> -->
          <DataDisplay></DataDisplay>

        </ContentFrame>
      </div>
    </div>

    <div class="unityModel">
      <div class="unityModel__shade"></div>
      <Unity></Unity>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import ContentFrame from "./components/contentFrame/contentFrame.vue";
import LineCharts from "./components/RightPanel/LineCharts/LineCharts.vue";
import DevicePopUp from "./components/devicePopUp/DevicePopUp.vue";
import AlarmHandling from "./components/LeftPanel/AlarmHandling/AlarmHandling.vue";
import DataDisplay from "./components/RightPanel/DataDisplay/DataDisplay.vue";
import DataPopUp from "./components/RightPanel/DataPopUp/DataPopUp.vue"
import Unity from "./unity.vue";
import {
  information,
  smartRingData,
  cameraData,
  solarPanelsData,
  deviceListData,
} from "./temp/data";

import { ref } from "vue";
import "xgplayer"; //西瓜视频，播放摄像头
import FlvJsPlayer from "xgplayer-flv.js"; //西瓜视频，播放摄像头

export default {
  name: "index",
  components: {
    ContentFrame,
    LineCharts,
    DevicePopUp,
    Unity,
    AlarmHandling,
    DataDisplay,
    DataPopUp
  },
  data() {
    return {
      title: "未知斜坡",
      baseData: {},
      /**智能环状况 */
      smartRing: smartRingData,
      /**摄像头状况 */
      camera: cameraData,
      /**太阳能版状况 */
      solarPanels: solarPanelsData,
      /**智能环图表option */
      smartRingPie: {},
      /**摄像头图表option */
      cameraPie: {},
      /**太阳能板图表option */
      solarPanelsPie: {},

      monitorLits: [
        {
          id: "110111199702221184",
          code: "GB28181",
          name: "作业摄像头",
          video:
            "ws://192.168.1.200:8866/live?url=rtsp://admin:zlby13579@192.168.1.2:554/h264/ch1/main/av_stream",
        },
        {
          id: "110111199604187576",
          code: "GB28179",
          name: "道路摄像头",
          video:
            "ws://192.168.1.200:8866/live?url=rtsp://admin:zlby13579@192.168.1.16:554/h264/ch1/main/av_stream",
        },
        {
          id: "110111199604187577",
          code: "GB28179",
          name: "休息室摄像头",
          video:
            "ws://192.168.1.200:8866/live?url=rtsp://admin:zlby13579@192.168.1.65:554/h264/ch1/main/av_stream",
        },
      ],
      monitorSelectValue: "110111199702221184",
      monitorData: {
        id: "110111199702221184",
        code: "GB28181",
        name: "作业摄像头",
        video:
          "ws://192.168.1.200:8866/live?url=rtsp://admin:zlby13579@192.168.1.2:554/h264/ch1/main/av_stream",
      },
      pointImgs: ["/static/img/slope/measurement-points.webp"],
      /**天气数据 */
      weather: {},
      /**中间设备弹出框数据 */
      deviceData: {},
      /**设备弹出框遮罩层层级 */
      z: false,
      /**摄像头 */
      player: ref({}),
      videoShow: true,
    };
  },

  methods: {
    /**
     * 监控选择变更事件
     * @param {String} FN_PARAMS
     * */
    monitorSelectChangeEvent(value) {
      this.monitorSelectValue = value;
      this.monitorData = this.monitorLits.find(
        (item) => item.id === this.monitorSelectValue
      );
      this.playVideo(this.monitorData.video);
    },

    getContentFrameData() {
      this.baseData = information;
    },

    getWeather() {
      axios
        .get(
          "http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=13377728&appsecret=Zr1ei8id&unescape=1&cityid=101300101"
        )
        .then((Response) => {
          this.weather = Response.data;
          console.log(Response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    /**打开设备弹窗信息*/
    onclickDevice(i) {
      this.deviceData = deviceListData[i];
      this.z = true;
    },

    /**
     * 播放摄像头
     * @param {String} FN_PARAMS
     */
    playVideo(playUrl) {
      if (this.player.value != null) {
        this.player.value.destroy();
      }
      this.player.value = new FlvJsPlayer({
        id: "video1",
        playsinline: true,
        whitelist: [""],
        url: playUrl,
        screenShot: true,
        download: true,
        autoplay: true,
        fluid: true,
        ignores: ["progress", "play", "time"],
      });
    },

    /**
     * 关闭摄像头
     */
    closePlayVideo() {
      if (this.player.value != null) {
        this.player.value.destroy();
        this.player.value = null;
      }
    },

    /**路由跳转 回首页
     * @param param 路由地址
     */
    onclickRouterUrl(param) {
      this.$router.push({ path: param });
    },
  },
  created() {
    this.title = this.$route.query.name;
    this.getContentFrameData();
    this.smartRingPie = this.$eChartFn.containsImg(this.smartRing);
    this.cameraPie = this.$eChartFn.containsImg(this.camera);
    this.solarPanelsPie = this.$eChartFn.containsImg(this.solarPanels);
    // this.getWeather();
  },
  mounted() {
    this.weather = require("./temp/weater.json");
    this.playVideo(this.monitorData.video);
  },
};
</script>
<style scoped lang="less">
@import "../../assets/css/chuShiHua.less";
@import url("./style/deviceStatus");
@import url("./style/middleWrapper");

.main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .main-title {
    position: relative;
    width: 99%;
    height: 5%;
    display: flex;
    align-items: center;
    margin-left: 1%;
    z-index: 3;
    &__router {
      font-size: 24px;
      font-weight: 400;
      color: #e9fbff;
      line-height: 28px;
      text-shadow: 0px 0px 2px #27a6ff;
      cursor: pointer;
    }
    &__icon {
      width: 2vw;
      aspect-ratio: 1/1;
      background: url("/static/img/slope/position.webp") center no-repeat;
      background-size: 100%;
    }
    &__position {
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
    }
  }

  .main-content {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 95%;
  }
}

.left-wrapper {
  width: 25.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  z-index: 2;

  .content-boundary {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .row,
  .row1 {
    width: 100%;
    height: calc(45% / 3);
    display: flex;
    align-items: baseline;
    &__code {
      width: 16%;
      font-size: 15px;
      font-weight: 500;
      color: #ffffff;
      line-height: 24px;
    }
    &__value {
      width: 82%;
      font-size: 15px;
      font-weight: 500;
      color: #45b6df;
      line-height: 19px;
    }
  }

  .row {
    padding-bottom: 1%;
  }

  .row1 {
    width: 50%;

    &__code {
      width: 32%;
    }

    &__value {
      width: 68%;
    }
  }

  .overview-row {
    height: 55%;

    .row-scroll {
      overflow-y: scroll;
      width: 82%;
      height: 100%;
      &__value {
        width: 100%;
        font-size: 15px;
        font-weight: 500;
        color: #45b6df;
        line-height: 19px;
      }
    }

    //滚动条样式
    .row-scroll::-webkit-scrollbar {
      width: 0px;
    }
  }
}

.middle-wrapper {
  width: 47%;
  height: 100%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.right-wrapper {
  width: 25.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  .right-wrapper__select {
    margin-left: auto;

    .el-select {
      height: 20px;
      margin-left: 11px;

      /deep/ .el-input--suffix {
        height: 100%;

        > input {
          height: 100%;
          border: none;
          background-color: transparent;
          color: #fff;
          text-align: right;
        }

        .el-input__suffix {
          top: -10px;
          height: 40px;
          text-align: right;

          .el-icon-arrow-up:before {
            color: #fff;
          }
        }
      }
    }
  }

  .right-wrapper__content {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .right-wrapper__content__video {
      width: 100%;
      height: 100%;
    }
  }

  .right-wrapper__container {
    position: relative;
    width: 100%;
    height: 100%;

    .right-wrapper__container__img {
      width: 100%;
      height: 100%;
    }

    .right-wrapper__container__icon {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 20px;
      color: #fff;
      pointer-events: none;
    }
  }
}

.unityModel {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;

  &__shade {
    position: absolute;
    width: 100%;
    aspect-ratio: 1/1;
    left: 0;
    top: 0;
    background: radial-gradient(at 50% 71%, #020b1b00 30%, #020b1b 52%);
    z-index: 2025;
    pointer-events: none;
    rotate: 180deg;
  }
}
</style>
